<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="201600710">

  <title>物流中心选址</title>

  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="jumbotron-narrow.css" rel="stylesheet">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src="js/ie-emulation-modes-warning.js"></script>

  <script src="js/jquery.min.js"></script>
  <script src="js/bootstable.js"></script>
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    table {
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="header clearfix">
      <nav>
        <ul class="nav nav-pills pull-right">
          <!-- <li role="presentation" class="active"><a href="#">首页</a></li> -->
          <!-- <li role="presentation"><a href="#">About</a></li>
            <li role="presentation"><a href="#">Contact</a></li> -->
        </ul>
      </nav>
      <h3 class="text-muted">单物流网点选址办法---数值分析法</h3>
    </div>

    <div class="jumbotron">
      <h3>数值分析法</h3>
      <p class="lead">本页面为数值分析法的求解示例</p>
    </div>
    <!-- 第一个表 -->
    <div class="row marketing">
      <h3>工厂与市场基本信息表</h3>
      <br />
      <div class="col-lg-12">
        <div class="table-responsive">
          <table class="table table-bordered table-striped" id="mytable">
            <thead>
              <tr>
                <td rowspan="2">节点</td>
                <td rowspan="2">产品</td>
                <td rowspan="2">运输总量</td>
                <td rowspan="2">运输费率</td>
                <td colspan="2">坐标</td>
              </tr>
              <tr>
                <td>X</td>
                <td>Y</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>P1</td>
                <td>A</td>
                <td>2000</td>
                <td>0.05</td>
                <td>3</td>
                <td>8</td>
              </tr>
              <tr>
                <td>P2</td>
                <td>B</td>
                <td>3000</td>
                <td>0.05</td>
                <td>8</td>
                <td>2</td>
              </tr>
              <tr>
                <td>M1</td>
                <td>A&B</td>
                <td>2500</td>
                <td>0.075</td>
                <td>2</td>
                <td>5</td>
              </tr>
              <tr>
                <td>M2</td>
                <td>A&B</td>
                <td>1000</td>
                <td>0.075</td>
                <td>6</td>
                <td>4</td>
              </tr>
              <tr>
                <td>M3</td>
                <td>A&B</td>
                <td>1500</td>
                <td>0.075</td>
                <td>8</td>
                <td>8</td>
              </tr>
            </tbody>
          </table>
          <button class="btn btn-info" id="add"><i class="fa fa-plus"></i> 点击添加新的数据行</button>           
        </div>

      </div>
    </div>
    <!-- 第二个表 -->
    <div class="row marketing">
      <h3>相关数据表</h3>
      <br />
      <div class="col-lg-12">
        <div class="table-responsive">
          <table class="table table-bordered table-striped" id="mytable1">
            <thead>
              <tr>
                <td>节点</td>
                <td>X<small>i</small></td>
                <td>Y<small>i</small></td>
                <td>V<small>i</small></td>
                <td>R<small>i</small></td>
                <td>V<small>i</small>R<small>i</small></td>
                <td>V<small>i</small>R<small>i</small>X<small>i</small></td>
                <td>V<small>i</small>R<small>i</small>Y<small>i</small></td>
              </tr>
            </thead>
            <tbody id="autoCal">
            </tbody>
          </table>
          <button class="btn btn-info" id="autoCalBtn"><i class="fa fa-plus"></i> 点击计算相关数据表</button>         
        </div>
      </div>
    </div>
    <!-- 第三个表di -->
    <div class="row marketing">
      <h3>计算d<small>i</small>数据表</h3>
      <br />
      <div class="col-lg-12">
        <div class="table-responsive">
          <table class="table table-bordered table-striped" id="mytable2">
            <thead>
              <tr>
                <td>i</td>
                <td>X<small>i</small></td>
                <td>Y<small>i</small></td>
                <td>V<small>i</small></td>
                <td>R<small>i</small></td>
                <td>d<small>i</small>(km)</td>
              </tr>
            </thead>
            <tbody id="autoCal">
            </tbody>
          </table>
          <button class="btn btn-info" id="autoDValue"><i class="fa fa-plus"></i>
            点击计算d<small>i</small>数据表</button>         
        </div>
      </div>
    </div>

    <!-- 第四个表 迭代结果 -->
    <div class="row marketing">
      <h3>迭代结果</h3>
      <br />
      <div class="col-lg-12">
        <div class="table-responsive">
          <table class="table table-bordered table-striped" id="mytable3">
            <thead>
              <tr>
                <td>迭代次数</td>
                <td>X</td>
                <td>Y</td>
                <td>总成本</td>
              </tr>
            </thead>
            <tbody id="result">
            </tbody>
          </table>
          <div id="options-groups">
            <div class="col-lg-3">
              <div class="form-group">
                <div class="input-group" style="margin-bottom: 0px;padding-bottom: 0px;">
                  <div class="input-group-addon">迭代</div>
                  <input type="text" class="form-control" id="IterNum" placeholder="例:100" value="100">
                  <div class="input-group-addon">次</div>
                </div>
              </div>

            </div>
            <div class="col-lg-6">
              <button class="btn btn-info" id="iterResult"><i class="fa fa-plus"></i>
                点击迭代</button>     
            </div>
          </div>
        </div>
      </div>
    </div>


    <footer class="footer">
      <p>&copy; 物流管理1601 201600710 </p>
    </footer>

  </div> <!-- /container -->


  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="js/ie10-viewport-bug-workaround.js"></script>

  <script>
    // 初始数据
    var baseInfo = new Array(); // 基本信息表
    var relatedData;
    var disData; // di信息表
    var X0 = 0;
    var Y0 = 0;

    // 初始化信息表
    $('#mytable').SetEditable({
      columnsEd: "0,1,2,3",         //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5"
      $addButton: $('#add'),        //Jquery object of "Add" button
      onEdit: function () { },   //Called after edition
      onBeforeDelete: function () { }, //Called before deletion
      onDelete: function () { }, //Called after deletion
      onAdd: function () { }     //Called when added a new row
    });

    // 点击计算相关数据表
    $("#autoCalBtn").click(function () {
      // 获取第一个数据表
      for (let i = 0; i < $('#mytable tbody tr')["length"]; i++) {
        // console.log($('#mytable tbody tr')[i].cells[0].innerHTML)
        let tempArr = new Array();
        tempArr[0] = $('#mytable tbody tr')[i].cells[0].innerHTML;
        tempArr[1] = $('#mytable tbody tr')[i].cells[1].innerHTML;
        tempArr[2] = $('#mytable tbody tr')[i].cells[2].innerHTML;
        tempArr[3] = $('#mytable tbody tr')[i].cells[3].innerHTML;
        tempArr[4] = $('#mytable tbody tr')[i].cells[4].innerHTML;
        tempArr[5] = $('#mytable tbody tr')[i].cells[5].innerHTML;

        baseInfo[i] = tempArr;
      }

      // 获取第二个表计算的数据
      relatedData = calRelatedData(baseInfo);

      let $table = $("#mytable1");
      $("#mytable1 tbody").empty();

      for (let i = 0; i < relatedData.length; i++) {
        let $tr = $("<tr>" +
          "<td>" + relatedData[i][0] + "</td>" +
          "<td>" + relatedData[i][1] + "</td>" +
          "<td>" + relatedData[i][2] + "</td>" +
          "<td>" + relatedData[i][3] + "</td>" +
          "<td>" + relatedData[i][4] + "</td>" +
          "<td>" + relatedData[i][5] + "</td>" +
          "<td>" + relatedData[i][6] + "</td>" +
          "<td>" + relatedData[i][7] + "</td>" +
          +"</tr>");
        $table.append($tr);
      }
      // 计算总和
      let $totaltr = $("<tr>" +
        "<td>总和</td>" +
        "<td>" + "</td>" +
        "<td>" + "</td>" +
        "<td>" + "</td>" +
        "<td>" + "</td>" +
        "<td>" + calRelatedRowTotalData(relatedData, 5) + "</td>" +
        "<td>" + calRelatedRowTotalData(relatedData, 6) + "</td>" +
        "<td>" + calRelatedRowTotalData(relatedData, 7) + "</td>" +
        +"</tr>");
      $table.append($totaltr);

      // 【第一次求值】计算保存X0 Y0的值
      X0 = calRelatedRowTotalData(relatedData, 6) / calRelatedRowTotalData(relatedData, 5);
      Y0 = calRelatedRowTotalData(relatedData, 7) / calRelatedRowTotalData(relatedData, 5);
      // console.log(X0,Y0)
    })

    // 点击di数据表
    $("#autoDValue").click(function () {

      let $table = $("#mytable2");
      $("#mytable2 tbody").empty();

      for (let i = 0; i < relatedData.length; i++) {
        let $tr = $("<tr>" +
          "<td>" + relatedData[i][0] + "</td>" +
          "<td>" + relatedData[i][1] + "</td>" +
          "<td>" + relatedData[i][2] + "</td>" +
          "<td>" + relatedData[i][3] + "</td>" +
          "<td>" + relatedData[i][4] + "</td>" +
          "<td>" + distant(relatedData[i][1], X0, relatedData[i][2], Y0).toString().substring(0,distant(relatedData[i][1], X0, relatedData[i][2], Y0).toString().indexOf(".")+4)  + "</td>" +
          +"</tr>");
        $table.append($tr);
      }
      disData = calDisData(relatedData);
    })

    // 点击进行迭代
    $("#iterResult").click(function () {
      let $table = $("#mytable3");
      $("#mytable3 tbody").empty();
      let iterCount = 1 + parseInt($("#IterNum").val());
      for (let i = 0; i < iterCount; i++) {
        let $tr = $("<tr>" +
          "<td>" + i + "</td>" +
          "<td>" + X0.toFixed(3) + "</td>" +
          "<td>" + Y0.toFixed(3) + "</td>" +
          "<td>" + totalTC().toFixed(2) + "</td>" +
          +"</tr>");
        X0 = iterX();
        Y0 = iterY();
        disData = calDisData(relatedData);
        $table.append($tr);
      }
    })

    // 计算相关数据表的方法
    function calRelatedData(arr) {
      let returnArray = new Array();
      for (let i = 0; i < arr.length; i++) {
        let tempArr = new Array();
        tempArr[0] = (i + 1);
        tempArr[1] = baseInfo[i][4];
        tempArr[2] = baseInfo[i][5];
        tempArr[3] = baseInfo[i][2];
        tempArr[4] = baseInfo[i][3];
        tempArr[5] = (baseInfo[i][2] * baseInfo[i][3]);
        tempArr[6] = (baseInfo[i][2] * baseInfo[i][3] * baseInfo[i][4]);
        tempArr[7] = (baseInfo[i][2] * baseInfo[i][3] * baseInfo[i][5]);
        returnArray[i] = tempArr;
      }
      return returnArray;
    }

    // 计算di表的方法
    function calDisData(arr) {
      let returnArray = new Array();
      for (let i = 0; i < arr.length; i++) {
        let tempArr = new Array();
        tempArr[0] = arr[i][0];
        tempArr[1] = arr[i][1];
        tempArr[2] = arr[i][2];
        tempArr[3] = arr[i][3];
        tempArr[4] = arr[i][4];
        tempArr[5] = distant(arr[i][1], X0, arr[i][2], Y0);
        returnArray[i] = tempArr;
      }
      return returnArray;
    }

    // 计算相关数据表中总和的方法
    function calRelatedRowTotalData(arr, rowIndex) {
      let num = 0;
      for (let i = 0; i < arr.length; i++) {
        num += arr[i][rowIndex];
      }
      return num;
    }

    // 计算di
    function distant(XI, X0, YI, Y0) {
      return Math.sqrt((XI - X0) * (XI - X0) + (YI - Y0) * (YI - Y0));
    }

    // 迭代计算 X0
    function iterX() {
      let tempTop = 0;
      let tempBottom = 0;
      for (let i = 0; i < relatedData.length; i++) {
        tempTop+= relatedData[i][6]/disData[i][5];
        console.log(disData[i][5])
      }
      for (let i = 0; i < relatedData.length; i++) {
        tempBottom+= relatedData[i][5]/disData[i][5];
      }
      return tempTop/tempBottom;
    } 
    // 迭代计算 Y0
    function iterY() {
      let tempTop = 0;
      let tempBottom = 0;
      for (let i = 0; i < relatedData.length; i++) {
        tempTop+= relatedData[i][7]/disData[i][5];
      }
      for (let i = 0; i < relatedData.length; i++) {
        tempBottom+= relatedData[i][5]/disData[i][5];
      }
      return tempTop/tempBottom;
    } 
    // 总TC
    function totalTC() {
      let total = 0;
      for (let i = 0; i < relatedData.length; i++) {
        total+= relatedData[i][5]*disData[i][5];
      }
      return total;
    }
  </script>
</body>

</html>